coffee-ts/pages/products/[customId].tsx

import { Grid, Typography } from '@mui/material';
import { Box, Container } from '@mui/system';
import { dehydrate, QueryClient } from '@tanstack/react-query';
import { NextPage } from 'next';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import Image from 'next/image';
import { useRouter } from 'next/router';
import React from 'react';
import GridItem from '../../components/grid-item/GridItem';
import Loader from '../../components/loader/Loader';
import ProductCard from '../../components/product-card/ProductCard';
import TabContent from '../../components/tab-content/TabContent';
import { useFetchSingleProduct } from '../../hooks/useFetchProductData';
import { getProductData } from '../../requests/products/producDataRequest';
import { useStore, useStoreUpdate } from '../../store/cart-context';

const SingleProduct: NextPage = () => {
    const { t } = useTranslation('products');
    const { addCartValue } = useStoreUpdate();
    const { cartStorage } = useStore();

    const router = useRouter();

    const { customId } = router.query;

    const { data, isLoading } = useFetchSingleProduct(customId);

    const addProductToCart = (quantity) => addCartValue(data.product, quantity);
    const inCart = cartStorage?.some(
        (item) => item.product.customID === data?.product.customID
    )
        ? true
        : false;

    if (isLoading) {
        return <Loader loading={isLoading} />;
    }

    return (
        <Box
            sx={{
                display: 'flex',
                flexDirection: 'column',
            }}
        >
            <Container>
                <Typography
                    fontFamily={'body1.fontFamily'}
                    fontSize="32px"
                    sx={{ mt: 25, height: '100%', color: 'primary.main' }}
                >
                    {data.product.name}
                </Typography>
                <Grid container spacing={2}>
                    <Grid sx={{ display: 'flex' }} item md={6} sm={12}>
                        <Image
                            src={data.product.image}
                            alt="product"
                            width={900}
                            height={700}
                        />
                    </Grid>
                    <TabContent
                        description={data?.product.description}
                        inCart={inCart}
                        price={data?.product.price}
                        category={data?.product.category}
                        addProductToCart={addProductToCart}
                    />
                </Grid>

                <Typography
                    sx={{
                        mt: { xs: '60px', md: '100px', lg: '150px' },
                        mb: 5,
                        color: 'primary.main',
                        fontSize: '32px',
                    }}
                >
                    {t('products:similar')}
                </Typography>
                <Grid container spacing={2}>
                    {data.similarProducts.map((product) => (
                        <GridItem key={product._id}>
                            <ProductCard product={product} />
                        </GridItem>
                    ))}
                </Grid>
            </Container>
        </Box>
    );
};

export const getServerSideProps = async (context: any) => {
    const { params } = context;
    const { customId } = params;

    const queryClient = new QueryClient();

    await queryClient.prefetchQuery(
        ['product', customId],
        async () => await getProductData(customId)
    );

    return {
        props: {
            dehydratatedState: dehydrate(queryClient),
            ...(await serverSideTranslations(context.locale, ['products'])),
        },
    };
};

export default SingleProduct;